<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
         <title>Polla Mundial</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="Vista/jquery/jquery-1.9.1.min.js"></script>
        <!--LIBRERIAS PARA LA CREACION DEL LIGIN-->
	<link href="Vista/login/bootstrap.min.css" rel="stylesheet">
	<!--<script type="text/javascript" src="Vista/login/jquery.min.js"></script>-->
	<script type="text/javascript" src="Vista/login/bootstrap.min.js"></script>
        <!--LIBRERIAS PARA LA CREACION DE ALERTAS-->
        <script type="text/javascript" src="Vista/alerts/functions.js"></script>
        <link href="Vista/alerts/style.css" rel="stylesheet">
        <!--LIBRERIAS PARA LA CREACION DEL MOBIL-->
        <link rel="stylesheet" href="Vista/mobil/camera.css">		
        <link rel="stylesheet" href="Vista/mobil/style.css">
        <link rel="stylesheet" href="Vista/mobil/font-awesome.css">
        <!--<link rel="stylesheet" href="mobil/reset.css">-->
        <link rel="stylesheet" href="Vista/mobil/skeleton.css">
        <link rel="stylesheet" href="Vista/mobil/superfish.css">
        <script src="Vista/mobil/jquery.js"></script>
        <script src="Vista/mobil/jquery-migrate-1.2.1.js"></script>
        <script src="Vista/mobil/superfish.js"></script>
        <script src="Vista/mobil/jquery.easing.1.3.js"></script>
        <script src="Vista/mobil/owl.carousel.js"></script>
        <script src="Vista/mobil/camera.js"></script>
        <style>
            .button {
            /* Round 1 */
            border:1px solid #666;
            cursor:pointer;
            display:block;
            margin:10px auto 0;
            padding:3px;
            text-align:center;
            text-decoration:none;
            width:140px;
            height: 25px;
            /* Round 2 */
            -moz-border-radius:15px;
            -webkit-border-radius:15px;
            background:#20c167;
            background-image:-moz-linear-gradient(top, #20c167, #157f44);
            background-image:-o-linear-gradient(top, #20c167, #157f44);
            background-image:-webkit-gradient(linear, center top, center bottom, from(#20c167), to(#157f44));
            background-image:linear-gradient(top, #20c167, #157f44);
            border-radius:15px;
            color:#FFF;
            font-size:.75em;
            font-weight:bold;
            text-shadow:-1px -1px 0 #444;
          }
        </style>
        <script>
            $(document).ready(function(){
			jQuery('#camera_wrap').camera({
				loader: false,
				pagination: false ,
				minHeight: '444',
				thumbnails: false,
				height: '50%',
				caption: true,
				navigation: true,
				fx: 'mosaic'
			});
			/*carousel*/
			/*var owl=$("#owl");
				owl.owlCarousel({
				items : 2, //10 items above 1000px browser width
				itemsDesktop : [995,2], //5 items between 1000px and 901px
				itemsDesktopSmall : [767, 2], // betweem 900px and 601px
				itemsTablet: [700, 2], //2 items between 600 and 0
				itemsMobile : [479, 1], // itemsMobile disabled - inherit from itemsTablet option
				navigation : true,
				pagination : false
				});
			$().UItoTop({ easingType: 'easeOutQuart' });*/
			});
            function gestion(){
                
                var usuario = $("#usuario").val();
                var clave = $("#clave").val();
                
                if(usuario == ""){
                     userApprove("<h1><br></h1><b>Ingrese Su Nombre De Usuario</p>", "OK", function() { });
                    $("#usuario").focus();
                    return false;
                }
                
                if(clave == ""){
                    userApprove("<h1><br></h1><p>Ingrese su contraseña</p>", "OK", function() { });
                    $("#clave").focus();
                    return false;
                }
                
                $.ajax({
                    
                    async: true,
                    dataType: "json",
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url: "Controlador/consultas/gestion.php",
                    data: {usuario:usuario,clave:clave},
                    success: respuesta,
                    timeout: 4000
                          
                });
                
            }
            
            function respuesta(datos){
                var res = datos.respuesta;
                 
                if(res == 1){
                    var tipousu = datos.tipousu;
                    
                    if(tipousu == 1){
                        window.location = ("Vista/php/administracion.php");
                    }else if(tipousu == 2){
                        window.location = ("Vista/php/pollaMundial2014.php");
                    }
                    
                }else if(res == 2){
                    userApprove("<h1><br></h1><p>Usuario y/o contraeña invalido</p>", "OK", function() { });
                    

                }else{
                    userApprove("<h1><br></h1><p>Usuario Inexistente</p>", "OK", function() { });
                }
                
            }
            
        </script>
        
    </head>
    <body>
        <form method="post" action="javascript:gestion();">
            <div class="slider_wrapper">
                <div id="camera_wrap" class="">
                    <div data-src="Vista/images/slide.jpg " >
                        <div class="caption fadeIn">
                            <div class="price">
                               <img src="Vista/images/logomundial.png" width="300" height="200" alt="logomundial"/>
                            </div>
                            <p align="center"><a class="" data-toggle="modal" href="#myModal">INGRESAR</a></p>
                        </div>
                    </div>
                    <div data-src="Vista/images/slide1.jpg ">
                        <div class="caption fadeIn">
                                <div class="price">
                                    <img src="Vista/images/logomundial.png" width="300" height="200" alt="logomundial"/>
                                </div>
                                    <p align="center"><a  data-toggle="modal" href="#myModal">INGRESAR</a></p>
                        </div>
                    </div>
                    <div data-src="Vista/images/slide2.jpg ">
                            <div class="caption fadeIn">
                                    <div class="price">
                                       <img src="Vista/images/logomundial.png" width="300" height="200" alt="logomundial"/>
                                    </div>
                                     <p align="center"><a data-toggle="modal" href="#myModal">INGRESAR</a></p>
                            </div>
                    </div>
                </div>
               </div> 
        <div class="modal hide" id="myModal" align="center" style="background-image: url(Vista/imagen/image_wa.jpg) ;height: 45%; width: 40%">
            <div style="height: 30%">
                <button type="button" class="close" data-dismiss="modal"><font color='#FFFFFF'>x</font></button>
            </div>
              <div class="modal-body">
                    <p><input type="text" name="txtUsuario" id="usuario" placeholder="usuario"></p>
                    <p><input type="password"  name="txtClave" id="clave" placeholder="contraseña"></p>
                    <p><input type="submit" value="Iniciar Sesion" class="button"/></p>
              </div>
         </div>
        </form>
        <div id="alertcontainer">
           <div id="alertbg"></div>
           <div id="messagefg">
                <div align="center">
                        <div></div>
                </div>
            </div>
        </div>
    </body>
</html>
